<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0">题目管理</h4>
        <div class="d-flex">
            <select id="categoryFilter" class="form-select me-2">
                <option value="">所有分类</option>
            </select>
            <select id="difficultyFilter" class="form-select me-2">
                <option value="">所有难度</option>
                <option value="1">简单</option>
                <option value="2">中等</option>
                <option value="3">困难</option>
            </select>
            <a href="${pageContext.request.contextPath}/admin/question/add" class="btn btn-primary">添加题目</a>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>题目</th>
                        <th>分类</th>
                        <th>难度</th>
                        <th>类型</th>
                        <th>练习次数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="questionList">
                    <!-- 题目列表将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center" id="pagination">
                <!-- 分页将通过JavaScript动态加载 -->
            </ul>
        </nav>
    </div>
</div>

<script>
$(document).ready(function() {
    var currentPage = 1;
    var pageSize = 10;
    var selectedCategory = '';
    var selectedDifficulty = '';

    // 加载分类列表
    function loadCategories() {
        $.get('${pageContext.request.contextPath}/admin/category/api/list', function(response) {
            if (response.code === 200) {
                var categories = response.data;
                var options = '<option value="">所有分类</option>';
                categories.forEach(function(category) {
                    options += '<option value="' + category.id + '">' + category.categoryName + '</option>';
                });
                $('#categoryFilter').html(options);
            }
        });
    }

    // 加载题目列表
    function loadQuestions(page) {
        var params = {
            page: page,
            size: pageSize,
            categoryId: selectedCategory,
            difficulty: selectedDifficulty
        };

        $.get('${pageContext.request.contextPath}/admin/question/api/list', params, function(response) {
            if (response.code === 200) {
                var questions = response.data.list;
                var total = response.data.total;
                var html = '';

                questions.forEach(function(question) {
                    html += '<tr>';
                    html += '<td>' + question.id + '</td>';
                    html += '<td>' + question.title + '</td>';
                    html += '<td>' + question.categoryName + '</td>';
                    html += '<td>' + getDifficultyLabel(question.difficulty) + '</td>';
                    html += '<td>' + (question.isMultiple ? '多选' : '单选') + '</td>';
                    html += '<td>' + (question.practiceCount || 0) + '</td>';
                    html += '<td>';
                    html += '<a href="${pageContext.request.contextPath}/admin/question/edit/' + question.id + '" class="btn btn-sm btn-warning me-1">编辑</a>';
                    html += '<button class="btn btn-sm btn-danger" onclick="deleteQuestion(' + question.id + ')">删除</button>';
                    html += '</td>';
                    html += '</tr>';
                });

                $('#questionList').html(html);
                updatePagination(page, Math.ceil(total / pageSize));
            }
        });
    }

    // 删除题目
    window.deleteQuestion = function(id) {
        if (confirm('确定要删除这道题目吗？')) {
            $.ajax({
                url: '${pageContext.request.contextPath}/admin/question/api/delete/' + id,
                type: 'DELETE',
                success: function(response) {
                    if (response.code === 200) {
                        loadQuestions(currentPage);
                    } else {
                        alert(response.message);
                    }
                }
            });
        }
    };

    // 更新分页
    function updatePagination(currentPage, totalPages) {
        var html = '';
        
        // 上一页
        html += '<li class="page-item ' + (currentPage <= 1 ? 'disabled' : '') + '">';
        html += '<a class="page-link" href="#" data-page="' + (currentPage - 1) + '" aria-label="Previous">';
        html += '<span aria-hidden="true">&laquo;</span></a></li>';
        
        // 页码
        for (var i = 1; i <= totalPages; i++) {
            if (i === currentPage) {
                html += '<li class="page-item active"><span class="page-link">' + i + '</span></li>';
            } else {
                html += '<li class="page-item"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
            }
        }
        
        // 下一页
        html += '<li class="page-item ' + (currentPage >= totalPages ? 'disabled' : '') + '">';
        html += '<a class="page-link" href="#" data-page="' + (currentPage + 1) + '" aria-label="Next">';
        html += '<span aria-hidden="true">&raquo;</span></a></li>';
        
        $('#pagination').html(html);
    }

    // 获取难度标签
    function getDifficultyLabel(difficulty) {
        switch(difficulty) {
            case 1: return '<span class="badge bg-success">简单</span>';
            case 2: return '<span class="badge bg-warning">中等</span>';
            case 3: return '<span class="badge bg-danger">困难</span>';
            default: return '<span class="badge bg-secondary">未知</span>';
        }
    }

    // 绑定分页点击事件
    $(document).on('click', '.pagination .page-link', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        if (page > 0) {
            currentPage = page;
            loadQuestions(currentPage);
        }
    });

    // 绑定事件
    $('#categoryFilter, #difficultyFilter').on('change', function() {
        selectedCategory = $('#categoryFilter').val();
        selectedDifficulty = $('#difficultyFilter').val();
        currentPage = 1;
        loadQuestions(currentPage);
    });

    // 初始化
    loadCategories();
    loadQuestions(currentPage);
});
</script>
